/**
 * @Author:刘忻忻，高志斐
 * @Date:2020/7/1
 * @Description:这是登录之后的我的页面
 */
import React, { Component } from "react";
import {List, WhiteSpace, Card, ImagePicker, Toast} from 'antd-mobile';
import {getCookieId, getCookiename, setCookie} from "../Login/Component_Login/GetCookie"
import axios from "axios";
import {Upload,message} from "antd";
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import {URL} from "../../index";
//钱包
const Item = List.Item;
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}
export default class My extends Component {
    constructor(props) {
        super(props);
        this.state = {
            disabled: false,
            eyeClose: false,  // 眼睛开闭
            accountAmount:0,
            loading:false,
            userName:null,
            holdingTotal:0//持仓总额
        }
        this.onEyeClick=this.onEyeClick.bind(this)
        this.loadHoldingTotal=this.loadHoldingTotal.bind(this)
        this.loadAccountAmount=this.loadAccountAmount.bind(this)
        this.toApprove=this.toApprove.bind(this)
    }

    componentDidMount() {
        this.loadHoldingTotal()
        this.loadAccountAmount()
    }

    //点击小眼睛控制金额是否显示
    onEyeClick() {
        // 眼睛开闭
        if (!this.state.eyeClose) {
            document.getElementById('eye-container').className = 'eye-close'
        } else {
            document.getElementById('eye-container').className = 'eye'
        }
        this.setState({
            eyeClose: !this.state.eyeClose
        })
    }
    //加载持仓总额
    loadHoldingTotal(){
        axios({
            method:"GET",
            url:URL+"/wealthAccount/showTotalPosition",
            params:{userId:getCookieId()}
        }).then(res=>{
            var totalMoney=res.data.positionDetail.totalMoney
            this.setState({
                holdingTotal:totalMoney,
            })
        }).catch(error =>{
            console.log(error)
        })
    }
    //加载账户余额
    loadAccountAmount(){
        axios({
            method:"GET",
            url: URL + "/userInfo/getAccountAmoount",
            params: {
                userId:getCookieId()
            }
        }).then(res => {
                if (res.data.code === 200) {
                    this.setState({
                        accountAmount: res.data.userAccountAmoount
                    })
                }else{
                    console.log(res.data.code)
                }
            })
    }
    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    loading: false,
                }),
            );
        }
    };
    toApprove(event){
        axios({
            method: "GET",
            url: URL + "/userInfo/getAuthenticationInfo",
            params: {
                userId:getCookieId()
            }
        }).then(res => {
            if (res.data.userName===null){
                this.props.history.push('/approve')
            }else if(res.data.userName!==null){
                this.props.history.push('/approveResult')
            }else{
                console.log(res.data)
            }
        })
    }
    render() {

        const uploadButton = (
            <div>
                {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        const { imageUrl } = this.state;

        return (
            <div className='my-root-container'>
                <div className='my-img-container' >
                    {/*放用户的头像和昵称*/}
                    {/* url 代表头像地址 */}
                    <ImagePicker
                        className='my-img-ip'
                        files={[{
                            url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
                        }]}
                        onChange={() => { }}
                        onImageClick={() => { }}
                        selectable={false}
                        multiple={false}
                        disableDelete={true}
                        length={1}
                    />
                    {/*<Upload*/}
                    {/*    name="avatar"*/}
                    {/*    listType="picture-card"*/}
                    {/*    className="avatar-uploader"*/}
                    {/*    showUploadList={false}*/}
                    {/*    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"*/}
                    {/*    beforeUpload={beforeUpload}*/}
                    {/*    onChange={this.handleChange}*/}
                    {/*>*/}
                    {/*    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}*/}
                    {/*</Upload>*/}

                    <div className='my-username' ><h2>{getCookiename()}</h2></div>
                </div>

                <div className='personal-panel' >
                    {/*持仓总额卡片*/}
                        <Card style={{ width: '50%', backgroundColor: "#108ee9", boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', border: '1px solid #e8e8e8', margin: "0px 5px" }}>
                            <Card.Header style={{ fontSize: "14px" }}
                                title="持仓总额"
                            />
                            <Card.Body>
                                {/* 通过判断eyeClose 来 看是否显示 */}
                                <div style={{ color: '#fff' }}>{this.state.eyeClose ? "**.*" : this.state.holdingTotal+" 元"}</div>
                            </Card.Body>
                        </Card>
                    {/*我的钱包卡片*/}
                        <Card
                            style={{ color: "#000", width: '50%', backgroundColor: "#f8a83f", boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', border: '1px solid #e8e8e8', margin: "0px 5px" }}
                            onClick={()=> this.props.history.push('/wallet') }
                        >
                            <Card.Header style={{ fontSize: "14px", color: "#000" }}
                                title="我的钱包"
                            />
                            <Card.Body>
                                <div style={{ color: '#fff' }}>{this.state.eyeClose ? "**.*" : this.state.accountAmount+" 元"}</div>
                            </Card.Body>
                        </Card>
                        <div id='eye-container' onClick={() => { this.onEyeClick() }} className='eye'></div>
                </div>
                <List className="my-list" >
                    <Item arrow="horizontal" multipleLine onClick={() => { this.props.history.push('/bankCardDetail') }}>
                        我的银行卡
                    </Item>
                    <Item arrow="horizontal" multipleLine onClick={() => { this.props.history.push('/transactionRecord') }}>
                        交易记录
                    </Item>
                    <Item arrow="horizontal" multipleLine onClick={() => { this.props.history.push('/holdingList')}}>
                        持仓列表
                    </Item>
                    {/*<Item arrow="horizontal" multipleLine onClick={() => { this.props.history.push('/userComment') }}>*/}
                    {/*    用户评论*/}
                    {/*</Item>*/}
                    <Item
                        arrow="horizontal"
                        multipleLine
                        onClick={this.toApprove}
                    >
                        实名认证
                    </Item>
                    <Item arrow="horizontal"
                          multipleLine
                          onClick={() => {
                              this.props.history.push('/retestRisk')
                          }}>
                        风险测评
                    </Item>
                    <Item arrow="horizontal" multipleLine onClick={() => { this.props.history.push('/collect') }}>
                        我的收藏
                    </Item>
                </List>
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
            </div>
        )
    }
}

